<template>
  <div class="mobileReg">
    <ul class="form">
      <li>
        <span>手机号</span>
        <div class="inputBox">
          <input v-model="userPhone" class="mobileInp" type="number">
        </div>
      </li>
      <li>
        <span>验证码</span>
        <div class="inputBox testCode">
          <input v-model="msgCode" class="mobileInp-s mobileInp" type="number">
          <b v-show="!isRuning" @click="getMsg">获取验证码</b>
          <b v-show="isRuning" class="timeing">{{ time }}s</b>
        </div>
      </li>
      <li>
        <span>密码</span>
        <div class="inputBox">
          <input v-model="password" class="mobileInp" type="password">
        </div>
      </li>
      <li>
        <span>微信</span>
        <div class="inputBox">
          <input v-model="wechatNum" class="mobileInp" type="text">
        </div>
      </li>
      <li>
        <span>QQ</span>
        <div class="inputBox tips">
          <input v-model="qqNum" class="mobileInp" type="number">
          <strong>QQ和微信便于我们客服更好的为您提供服务</strong>
        </div>
      </li>
      <li class="regBtn">
        <b @click="regNow">立即注册</b>
        <em>已有账号
          <strong @click="goWhere('mobileLogin')">登录</strong>
        </em>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue'
import { getMessage } from '@/assets/js/message.js'
import { isMobile } from '@/assets/js/utils'
import md5 from 'md5'
import tips from '@/components/base/mobile/js/tips'
Vue.use(tips)
export default {
  name: 'mobileReg',
  mixins: [getMessage],
  data () {
    return {
      userPhone: '',
      password: '',
      msgCode: '',
      qqNum: '',
      wechatNum: '',
      isRuning: false,
      time: ''
    }
  },
  methods: {
    goWhere (route, params) {
      this.$router.push({ name: route, query: { ...this.$route.query, ...params } })
    },
    regNow () {
      if (this.userPhone === '') {
        this.$tips.show({
          message: '请输入用户手机号'
        })
      } else if (this.msgCode === '') {
        this.$tips.show({
          message: '请输入短信验证码'
        })
      } else if (this.password === '') {
        this.$tips.show({
          message: '请输入密码'
        })
      } else {
        this.reg()
      }
    },
    reg () {
      let urlApi = ''
      if (this.$route.query.si) {
        urlApi = '/api/seller/account/sellerInvitorRegister'
      } else if (this.$route.query.ii) {
        urlApi = '/api/seller/account/register'
      } else {
        urlApi = '/api/seller/account/register'
      }
      this.$ajax.post(urlApi, {
        telephone: this.userPhone,
        code: this.msgCode,
        type: 1,
        password: md5(this.password),
        qq: this.qqNum,
        wechatNum: this.wechatNum,
        domain: window.location.host,
        inviteCode: this.$route.query.si || this.$route.query.ii || ''
      }).then((data) => {
        if (data.data.code === '200') {
          this.$tips.show({
            message: data.data.message
          })
          this.goWhere('mobileTips', { userName: this.userPhone })
        } else if (data.data.code === '1008') {
          if (data.data.message === window.location.host) {
            this.$tips.show({
              message: '您已注册, 请直接登录'
            })
          } else {
            this.$tips.show({
              message: '您已在域名' + data.data.message + '注册过帐号',
              type: 'warning'
            })
          }
        } else {
          this.$tips.show({
            message: data.data.message
          })
        }
      })
    },
    getMsg () {
      if (this.userPhone === '') {
        this.$tips.show({
          message: '请输入用户手机号'
        })
      } else {
        this.sedMsg('mobile')
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    if (isMobile()) {
      next()
    } else {
      next({ name: 'mobileIndex', query: to.query })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mobileReg
  width 100%
  min-height 100%
  overflow auto
  background #ffffff
  padding 2.6rem 1.5rem
  box-sizing border-box
  .form
    overflow auto
    li
      margin-bottom 3rem
      display flex
      justify-content center
      // align-items center
      >span
        width 4rem
        line-height 3.4rem
        margin-right 0.9rem
        font-size 1.3rem
        color #666666
        text-align right
      .inputBox
        flex 1
        .mobileInp
          caret-color #e34173
          font-size 1.2rem
          height 3.4rem
          line-height 1.8rem
          width 100%
          padding 0.5rem
          border none
          border-radius 5px
          border 1px solid #EEEEEE
          outline none
          box-sizing border-box
          -webkit-appearance none
          -webkit-appearance none
          -webkit-tap-highlight-color rgba(0, 0, 0, 0)
        .mobileInp-s
          flex 1
      .testCode
        display flex
        justify-content center
        align-items center
        .timeing
          background #cdcdcd
        b
          min-width 8.5rem
          height 3.4rem
          padding 0.9rem 1rem
          box-sizing border-box
          border-radius 0.5rem
          background #E34173
          color #ffffff
          font-size 1.3rem
          margin-left 0.4rem
          text-align center
      .tips
        display flex
        flex-direction column
        strong
          font-size 1rem
          line-height 1.5rem
          color #999999
    .regBtn
      display flex
      width 21.3rem
      margin 0 auto
      flex-direction column
      align-items center
      >b
        width 100%
        height 3.8rem
        line-height 3.8rem
        border-radius 0.5rem
        background #E34173
        color #ffffff
        font-size 1.5rem
        text-align center
      >em
        align-self flex-end
        margin-top 0.4rem
        strong
          color #E34173
</style>
